<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-info', title: '编号信息' },
        ]"
      />
    </div>
    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem label="规则" name="code" :parent="_self" :form="form" />
          <customFormItem label="名称" name="name" :parent="_self" :form="form" />
          <customFormItem label="段数" name="partNum" :parent="_self" :form="form" :type="constCommon.formItemType.inputNumber.name"/>
          <customFormItem
            label="分隔符"
            name="delimiter"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: propDictionaries['delimiter'] }"
          />
          <customFormItem
            label="段1表达式"
            name="part1Cond"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: propDictionaries['part1Cond'] }"
          />
          <customFormItem label="段1字符串" name="part1" :parent="_self" :form="form" help="自定义字符串或自增初始值" />
          <customFormItem
            label="段2表达式"
            name="part2Cond"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: propDictionaries['part2Cond'] }"
          />
          <customFormItem label="段2字符串" name="part2" :parent="_self" :form="form" help="自定义字符串或自增初始值" />
          <customFormItem
            label="段3表达式"
            name="part3Cond"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: propDictionaries['part3Cond'] }"
          />
          <customFormItem label="段3字符串" name="part3" :parent="_self" :form="form" help="自定义字符串或自增初始值" />
          <customFormItem
            label="段4表达式"
            name="part4Cond"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: utils.getDictDataList('part4Cond') }"
          />
          <customFormItem label="段4字符串" name="part4" :parent="_self" :form="form" help="自定义字符串或自增初始值" />

          <div id="box-info" class="box-title">编号信息</div>
          <t-row v-show="strings.isNotBlank(form.id)" style="width: 100%">
            <data-view
              v-show="propStatus === 'edit'"
              propViewKey="sys_serial_owner"
              :propInitData="form"
              ref="childDataView"
              :propAutoFetchData="false"
            />
          </t-row>
        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {},
    }
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)

        // 注意：如果childDataView通过v-if进行判断是否显示，此处代码不会执行
        this.$refs.childDataView.setQueryWrapper(this.$newWrapper().eq('ruleId', this.strings.defaultIfBlank(this.form.id, '-1')))
      },
      afterSave: () => {
        // 用作返回自动主键
        this.$set(this.form, this.propPrimaryKey, this.propViewFormData[this.propPrimaryKey])
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
    })
  },
  props: [
    'propPrimaryKey',
    'propDictionaries',
    'propCurrentRow',
    'propViewFormData',
    'propReadonly',
    'propStatus',
    'propRules',
    'propInitData',
  ],
  components: {
    customAnchor,
  },
  computed: {},
}
</script>
